<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论详情</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body style="background-color: yellowgreen " class="container">
<br/><br/>
<br/><br/>

<div style="text-align: center;color: yellow;font-size: 70px">父话题</div>
<br>

<!--父话题-->
<div style="background-color: lightskyblue; margin: 20px 30px" th:object="${comment}">
    <!--    <h1>父话题</h1>-->
    <input id="cid" type="hidden" th:value="${comment.cid}"/>
    <div th:if="*{isFine == 1}">加精评论</div>
    <h2 th:text="*{nickname}+'说:'">nickname</h2>
    <span style="color: gray" th:text="*{cDate}">cDate</span>
    <div th:text="*{cContent}">cContent</div>
</div>
<br>

<!--子话题-->
<!--表格内容-->
<div>
    <!--    <h1>评论</h1>-->
    <script src="../../layer/layer.js"></script>
    <!--bootstrapTable表头-->
    <div class="with:80%">
        <table id="comment-table" class="table table-striped table-bordered">
            <caption style="text-align: center;color: red;font-size: 50px">子评论</caption>
        </table>
    </div>

    <!--bootstrapTable内容-->
    <script>
        $(function () {
            function getIsFineString(value, row, index) {
                let isFine = row.isFine;
                if (isFine) {
                    return [
                        '<span>加精</span>'
                    ].join('');
                } else {
                    return [
                        '<span>普通</span>'
                    ].join('');
                }

            }

            $("#comment-table").bootstrapTable({
                url: "/comment/info-data",//数据地址
                striped: true,//是否显示行的间隔
                pageNumber: 1,//初始化加载第几页
                pagination: true,//是否分页
                sidePagination: 'server',
                pageSize: 10,
                pageList: [10, 15, 20],
                showRefresh: true,
                queryParams: function (params) {
                    var temp = {
                        offset: params.offset,
                        limit: params.limit,
                        pageSize: params.pageSize,
                        cTargetId: $("#cid").val(),
                    };
                    return temp;
                },
                columns: [
                    // {
                    //     title: "编号",
                    //     field: "cid",
                    //     sortable: true
                    // },
                    {
                        title: "昵称",
                        field: "nickname",
                        sortable: false
                    },
                    {
                        title: "内容",
                        field: "cContent",
                        sortable: false
                    },
                    {
                        title: "是否加精",
                        field: "isFine",
                        // sortable: false,
                        formatter: getIsFineString//将代号转为文字
                    },
                    {
                        title: "发表时间",
                        field: "cDate",
                        sortable: false
                    }
                ]
            });
        });
    </script>
</div>

</body>
</html>